<template>
  <!-- 洪水预报 -->
  <div class="river-top">
    <div class="river-top-head">
      <span class="title-font">基础信息</span>
    </div>
    <div class="river-top-list">
      <div class="table-box">
        <el-table
          border
          :data="stationInfo"
          :span-method="objectSpanMethod"
          style="width: 100%"
          height="100%"
          size="mini"
          :cell-style="cellStyle"
        >
          <el-table-column prop="item" label="分项" align="center" />
          <el-table-column prop="kpi" label="特性指标" align="center" />
          <el-table-column prop="unit" label="单位" align="center" />
          <el-table-column prop="kpiVal" label="指标值" align="center" />
        </el-table>
      </div>
    </div>
  </div>
  <div class="river-center">
    <div class="river-top-head">
      <span class="title-font">溃坝洪水</span>
    </div>
    <div class="river-center-box">
      <el-row class="river-center-row">
        <el-col :span="6"> 溃口宽度： {{ resultObj?.eig?.breachWidth }}</el-col>
        <el-col :span="6"> 溃坝洪峰流量：{{ resultObj?.eig?.maxQ }} </el-col>
        <el-col :span="8">
          <el-checkbox-group v-model="checkList">
            <el-checkbox
              label="淹没最大到达时间"
              size="large"
              value="arrival-time"
              class="font-color"
              @change="handleChangeTree($event, 'arrival-time')"
            />

            <el-checkbox
              label="淹没最大水深"
              size="large"
              value="depth"
              class="font-color"
              @change="handleChangeTree($event, 'depth')"
            />
          </el-checkbox-group>
        </el-col>
        <el-col :span="4">
          <el-button
            type="success"
            :loading="isLoading"
            :disable="isLoading"
            @click="handleClickCompute"
            >{{ isLoading ? '计算中' : '计算' }}</el-button
          >
        </el-col>
      </el-row>
    </div>
  </div>
  <div class="river-bottom">
    <div class="config-box">
      <div class="tabs-box">
        <el-tabs v-model="timeTabs" height="100%">
          <el-tab-pane label="溃决洪水过程" :name="24">
            <burst-water :x-labels="xValue" :y-values="yValue" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>

  <!-- 弹窗 -->
</template>
<script setup>
import { ref, watch } from 'vue'
import { addDynamicLayerShowAll, removeLayer } from '@/utils/mapUtils'
import {
  getDbfSectionAttrList,
  getDbfSectionResult,
  // 查询溃坝预报断面成果服务
  getDbfSectionResultService
} from '@/services/modules/model-config'
import burstWater from '@/components/app-echart/burst-water.vue'
const props = defineProps({
  // 点击断面 水库的信息
  sectionObj: {
    type: Object,
    default: () => {}
  },
  // 模型信息
  modelobj: {
    type: Object,
    default: () => {}
  },
  // 流域信息
  zoneId: {
    type: Number,
    default: 1
  }
})
const isLoading = ref(false)
const stationInfo = ref([])
const timeTabs = ref(24)
const resultObj = ref({})
const xValue = ref([])
const yValue = ref([])
const checkList = ref([])

// 调整表格高度
const cellStyle = ({ columnIndex }) => {
  if (columnIndex != 0) {
    return { padding: '0px' }
  }
}
const handleClickCompute = () => {
  isLoading.value = true
  setTimeout(() => {
    isLoading.value = false
    handleDbfSectionResult()
  }, 3000)
}
// 编辑表格
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  // 如果是第一列
  if (columnIndex === 0) {
    // 如果是第一行
    if (rowIndex === 0) {
      return {
        rowspan: 12,
        colspan: 1
      }
    }
    if (rowIndex === 12) {
      return {
        rowspan: 5,
        colspan: 1
      }
    }
    if (rowIndex === 17) {
      return {
        rowspan: 3,
        colspan: 1
      }
    } else {
      return {
        rowspan: 0,
        colspan: 0
      }
    }
  }
}
const handleChangeTree = async (event, val) => {
  let mapUrl = ''
  await getDbfSectionResultService({
    blkcd: props.sectionObj?.blkcd,
    serviceType: val
  }).then((res) => {
    mapUrl = res.data.serviceAddress
    switch (val) {
      case 'arrival-time':
        if (event) {
          addDynamicLayerShowAll(
            window.mapInstance,
            mapUrl,
            13,
            'arrival-time',
            '时间',
            res.data.serviceLayer
          )
        } else {
          removeLayer(window.mapInstance, 'arrival-time')
        }

        break
      case 'depth':
        if (event) {
          addDynamicLayerShowAll(
            window.mapInstance,
            mapUrl,
            13,
            'depth',
            '水深',
            res.data.serviceLayer
          )
        } else {
          removeLayer(window.mapInstance, 'depth')
        }
        break
    }
  })
}
// 查询溃坝列表
const handleDbfSectionAttrList = () => {
  getDbfSectionAttrList({ blkcd: props.sectionObj?.blkcd }).then((res) => {
    if (res.code == 200) {
      stationInfo.value = res.data.sort((a, b) => {
        const nameOrder = { 水库: 1, 大坝: 2, 泄洪建筑物: 3 } // 定义优先级顺序
        return nameOrder[a.item] - nameOrder[b.item]
      })
    }
  })
}
// 查询溃坝预报断面成果
const handleDbfSectionResult = () => {
  getDbfSectionResult({ blkcd: props.sectionObj?.blkcd }).then((res) => {
    if (res.code == 200) {
      resultObj.value = res.data
      xValue.value = res.data.result.map((e) => e.t)
      yValue.value = res.data.result.map((e) => e.q)
    } else {
      xValue.value = []
      yValue.value = []
    }
  })
}

watch(
  () => {
    props.sectionObj?.blkcd
  },
  () => {
    // 流域切换 获取预报雨量站信息
    handleDbfSectionAttrList()
    // 查询溃坝预报断面成果
    handleDbfSectionResult()
    // 断面切换
    checkList.value = []
    if (window.mapInstance) {
      removeLayer(window.mapInstance, 'arrival-time')
      removeLayer(window.mapInstance, 'depth')
    }
  },
  {
    deep: true,
    immediate: true
  }
)
</script>
<style lang="less" scoped>
.river-top-head {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 25px;
  .title-font {
    color: #409eff;
  }
}
.weight-box {
  display: flex;
  align-items: center;

  :deep(.el-input) {
    width: 80%;
  }
}
.river-top {
  width: 100%;
  height: 350px;
  padding: 5px 0px;
  font-size: var(--content-fontsize);
  box-sizing: border-box;

  .river-top-list {
    // height: 200px;
    height: calc(100% - 30px);
    padding: 0 0px;
    margin-top: 7px;
    .table-box {
      width: 100%;
      height: 100%;
    }
    .page-box {
      display: flex;
      // justify-content: end;
      justify-content: flex-end;
      align-items: center;
      height: calc(100% - 205px);
      border-bottom: 1px solid rgb(163, 163, 163);
    }
  }
}
.river-center {
  .river-center-box {
    .river-center-row {
      display: flex;
      align-items: center;
      .font-color {
        color: #409eff;
      }
    }
  }
}
.river-bottom {
  width: 100%;
  // height: 455px;
  height: calc(100% - 480px);
  padding: 5px 0px;
  box-sizing: border-box;
  font-size: var(--content-fontsize);

  .title-font {
    display: block;
    height: 35px;
    line-height: 35px;
    color: #409eff;
  }
  .config-box {
    height: 100%;
    padding: 0px 0px;
    .paramsSelect-box {
      height: 50px;
      display: flex;
      align-items: center;
    }
    .tabs-box {
      // height: calc(100% - 50px);
      height: 100%;
      :deep(.el-tabs) {
        height: 100%;

        .el-tabs__content {
          height: calc(100% - 50px);
          overflow-y: auto;
          .el-tab-pane {
            height: 100%;
          }
        }
      }
    }
    .config-box-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 35px;
      width: 100%;
      .config-plan-left {
        display: flex;
        align-items: center;
        .config-plan-title {
          margin-right: 15px;
        }
        .plan-option {
          margin-left: 5px;
          color: #0054db;
          cursor: pointer;
        }
      }
      .config-plan-right {
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .btn-pading {
          margin-right: 15px;
        }
      }
    }
    .config-tabs {
      box-sizing: border-box;
      margin-top: 15px;
      height: calc(100% - 75px);
      :deep(.el-textarea) {
        height: 100%;
        .el-textarea__inner {
          height: 100%;
        }
      }
      :deep(.el-tabs) {
        height: 100%;
        .el-tabs__content {
          height: calc(100% - 55px);
          padding: 10px;
          .el-tab-pane {
            height: 100%;
            .upload-box {
              display: flex;
              // justify-content: space-between;
              align-items: center;
              .left-title {
                margin-right: 20px;
              }
              .el-input {
                width: 400px;
                margin-right: 20px;
              }
            }
          }
        }
      }
      .rainfall-config-box {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 100%;
        .rain-left {
          height: 100%;
          width: 180px;
          .computed-title {
            height: 40px;
            line-height: 40px;
            text-align: center;
            background-color: #f2f2f2;
          }
          .computed-main {
            overflow-y: auto;
            height: calc(100% - 40px);
            background: #d7d4d427;
            .unit-item {
              display: flex;
              align-items: center;
              justify-content: space-around;
              height: 40px;
              &.active {
                background-color: #f2f2f2;
                color: #0054db;
              }
              .basin-code {
                cursor: pointer;
              }
              .basin-location {
                cursor: pointer;
              }
            }
          }
        }
        .rain-right {
          height: 100%;
          width: calc(100% - 190px);

          .rainfall-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 35px;
            padding: 0 20px;
            line-height: 35px;
            box-sizing: border-box;
          }
          .rainfall-table-box {
            height: calc(100% - 35px);
            padding: 10px;
            box-sizing: border-box;
          }
        }
      }
      .model-parameter {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 100%;
        padding: 0 5px;
        box-sizing: border-box;
        :deep(.el-textarea__inner) {
          resize: none;
        }
        .confluence-box {
          width: 320px;
          height: 100%;
          .confluence-title {
            display: inline-block;
            height: 20px;
            font-weight: 600;
          }
          .confluence-main {
            display: flex;
            justify-content: space-between;
            height: calc(100% - 230px);
            padding: 0 10px;
            margin-top: 5px;
            box-sizing: border-box;
            &.w200 {
              height: calc(100% - 400px);
            }
            .parameter-model {
              width: 48%;
              .parameter-model-title {
                display: block;
                height: 25px;
                line-height: 25px;
              }
              .parameter-model-text {
                width: 100%;
                height: calc(100% - 45px);
                margin-top: 5px;
              }
            }
            .parameter-explain {
              width: 48%;
              .parameter-explain-title {
                display: block;
                height: 25px;
                line-height: 25px;
              }
              .parameter-explain-text {
                width: 100%;
                height: calc(100% - 45px);
                margin-top: 5px;
              }
            }
          }
        }
        .evolution-box {
          width: calc(100% - 330px);
          height: 100%;
          .evolution-title {
            display: inline-block;
            height: 20px;
            font-weight: 600;
          }
          .evolution-main {
            height: calc(100% - 25px);
            padding: 0 10px;
            box-sizing: border-box;
            margin-top: 10px;
            .evolution-main-top {
              display: flex;
              justify-content: space-between;
              height: 100px;
              .river-params {
                width: 43%;
                .river-params-title {
                  display: block;
                  height: 20px;
                }
                .river-params-text {
                  height: 82px;
                }
              }
              .params-explain {
                width: 55%;
                .params-explain-title {
                  display: block;
                  height: 20px;
                }
                .params-explain-text {
                  height: 82px;
                }
              }
            }
            .evolution-main-bottom {
              height: calc(100% - 20px);
              .el-tabs__header {
                margin-bottom: 0px;
              }
              .unit-section {
                display: flex;
                justify-content: space-between;
                height: calc(100% - 15px);
                .river-course {
                  width: 47%;
                  height: 100%;
                  .computed-title {
                    display: flex;
                    justify-content: space-between;
                    height: 20px;
                    line-height: 20px;
                    padding: 0 8px;
                    background-color: #f2f2f2;
                  }
                  .river-course-title {
                    width: 100%;
                    height: 20px;
                    background-color: #f2f2f2;
                    line-height: 20px;
                    text-align: center;
                  }
                  .river-course-main {
                    overflow-y: auto;
                    height: calc(100% - 10px);
                    background: #d7d4d427;
                    .river-item {
                      display: block;
                      height: 30px;
                      width: 100%;
                      line-height: 30px;
                      text-align: center;
                      cursor: pointer;
                      &.active {
                        background: #f2f2f2;
                        color: #0054db;
                      }
                    }
                    .computed-item {
                      display: flex;
                      justify-content: space-between;
                      height: 25px;
                      padding: 2px 10px;
                      line-height: 25px;
                      text-align: center;
                      cursor: pointer;
                      &.active {
                        background: #f2f2f2;
                        color: #0054db;
                      }
                      .computed-item-name {
                        width: 60px;
                        display: inline-block;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                      }
                    }
                  }
                }
                .bottom-model-params {
                  width: 50%;
                  height: 100%;

                  .model-title {
                    display: block;
                    height: 20px;
                  }
                  .model-params {
                    height: calc((100% - 28px) / 2);
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
